import ComponentCodePreview from "@/components/app/component-code-preview"
import { generateMetadata } from "../utils/metadata"
import { JSXPreviewBasic } from "./jsx-preview-basic"
import { JSXPreviewStreaming } from "./jsx-preview-streaming"

export const metadata = generateMetadata(
  "JSX Preview",
  "A component for rendering JSX strings as React components, with support for streaming content and automatic tag completion."
)

# JSX Preview (experimental)

A component for rendering JSX strings as React components, with support for streaming content and automatic tag completion.

## Examples

### Basic JSX Preview

The `JSXPreview` component can render JSX strings directly into React components.

<ComponentCodePreview
  component={<JSXPreviewBasic />}
  filePath="app/docs/jsx-preview/jsx-preview-basic.tsx"
  classNameComponentContainer="p-8"
/>

### Streaming JSX Preview

The `isStreaming` prop enables real-time rendering of JSX as it's being streamed, with automatic tag completion.

<ComponentCodePreview
  component={<JSXPreviewStreaming />}
  filePath="app/docs/jsx-preview/jsx-preview-streaming.tsx"
  classNameComponentContainer="p-8"
  hasReTrigger
/>

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

<TabsContent value="cli">

<CodeBlock
  code={`npx shadcn add "https://prompt-kit.com/c/jsx-preview.json"`}
  language="bash"
/>

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<CodeBlock filePath="components/prompt-kit/jsx-preview.tsx" language="tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Component API

### JSXPreview

| Prop        | Type             | Default | Description                                                          |
| :---------- | :--------------- | :------ | :------------------------------------------------------------------- |
| jsx         | string           |         | The JSX string to render                                             |
| isStreaming | boolean          | false   | Whether the JSX is being streamed (enables automatic tag completion) |
| className   | string           |         | Additional CSS classes                                               |
| ...props    | `JsxParserProps` |         | All other props from `react-jsx-parser`                              |
